@accordion-border: #CDD8E3;
@accordion-header-text: @ace-blue;
@accordion-header-text-hover: #6EA6CC;
@accordion-header-hover-bg: #F1F8FD;
@accordion-active-bg: #EEF4F9;

.enable_tabs() when (@enable-tabs = true) {

  .tab-content {
    border: 1px solid @tab-border;
    padding: 16px 12px;
    position: relative;
    //z-index:11;
  }
  .tab-content.no-padding {
    padding: 0;
  }
  .tab-content.no-border {
    border: none;
    padding: 12px;
  }
  .tab-content {
    .tab-paddingX (@index) when (@index >= 0) {
      &.padding-@{index} {
        padding: unit(@index, px) unit(ceil(@index * 0.75), px);
      }
      &.no-border.padding-@{index} {
        padding: unit(@index, px);
      }
      .tab-paddingX(@index - 2);
    }
    .tab-paddingX(32);
  }

  .nav.nav-tabs {
    .navtab-paddingX (@index) when (@index > 0) {
      &.padding-@{index} {
        padding-left: unit(@index, px);
      }
      .tabs-right > &.padding-@{index}, .tabs-left > &.padding-@{index} {
        padding-left: 0;
        padding-top: unit(@index, px);
      }
      .navtab-paddingX(@index - 2);
    }
    .navtab-paddingX(32);
  }

  .nav-tabs {
    border-color: #C5D0DC;
    margin-bottom: 0 !important; //to override .rtl's
    margin-left: 0;
    position: relative;
    top: 1px;

    > li {
      > a {
        padding: 7px 12px 8px;

        &, &:focus {
          border-radius: 0 !important;
          border-color: @tab-border;

          background-color: #F9F9F9;
          color: #999;

          margin-right: -1px;
          line-height: 18px;

          position: relative;
          //z-index:11;
        }

        &:hover {
          background-color: #FFF;
          color: @tab-hover-color;
          border-color: @tab-border;
        }

        &:active, &:focus {
          outline: none !important;
        }
      }

      //a

      &:first-child > a {
        margin-left: 0;
      }

      &.active > a {
        &, &:hover, &:focus {
          color: @tab-active-color;
          border-color: @tab-border;
          border-top: 2px solid @tab-active-border;
          border-bottom-color: transparent;
          background-color: #FFF;

          z-index: 1;
          line-height: 18px;
          margin-top: -1px;

          box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
        }
      }

    }

    .enable_tab_positions() when (@enable-tab-positions = true) {
      .tabs-below > & {
        /* tabs below */
        top: auto;
        margin-bottom: 0;
        margin-top: -1px;
        border-color: @tab-border;
        border-bottom-width: 0;

        > li {
          > a {
            &, &:hover, &:focus {
              border-color: @tab-border;
            }
          }

          &.active > a {
            &, &:hover, &:focus {
              border-color: @tab-border;
              border-top-width: 1px;
              border-bottom: 2px solid @tab-active-border;
              border-top-color: transparent;

              margin-top: 0;
              box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
            }
          }
        }
      }

      .tabs-left > & > li > a, .tabs-right > & > li > a {
        //tabs left
        min-width: 60px;
      }
      .tabs-left > & {
        top: auto;
        margin-bottom: 0;
        border-color: @tab-border;

        float: left;

        > li {
          float: none !important; //to override .rtl's

          > a {
            &, &:focus, &:hover {
              border-color: @tab-border;
              margin: 0 -1px 0 0;
            }
          }

          &.active {
            > a {
              &, &:focus, &:hover {
                border-color: @tab-border;
                border-top-width: 1px;
                border-left: 2px solid @tab-active-border;
                border-right-color: transparent;
                margin: 0 -1px 0 -1px;

                .box-shadow(~"-2px 0 3px 0 rgba(0,0,0,0.15)") !important; //to override .rtl's
              }
            }
          }
        }
      }

      .tabs-right > & {
        //tabs right
        top: auto;
        margin-bottom: 0;
        border-color: @tab-border;

        float: right;

        > li {
          float: none !important; //to override RTL's

          > a {
            &, &:focus, &:hover {
              border-color: @tab-border;
              margin: 0 -1px;
            }
          }

          &.active {
            > a {
              &, &:focus, &:hover {
                border-color: @tab-border;
                border-top-width: 1px;
                border-right: 2px solid @tab-active-border;
                border-left-color: transparent;
                margin: 0 -2px 0 -1px;

                .box-shadow(~"2px 0 3px 0 rgba(0,0,0,0.15)"); //to override .rtl's
              }
            }
          }
        }
      }
    }
    .enable_tab_positions();

    > li > a {
      //icon and badges
      > .badge {
        padding: 1px 5px;
        line-height: 15px;
        opacity: 0.75;
      }

      > .@{icon} {
        opacity: 0.75;
      }
    }

    > li.active > a {
      > .badge, > .@{icon} {
        opacity: 1;
      }
    }

    li .@{icon} {
      width: 1.25em;
      display: inline-block;
      text-align: center;
    }

    > li.open .dropdown-toggle {
      //dropdown in tabs
      background-color: #4F99C6;
      border-color: #4F99C6;
      color: #FFF;

      > .@{icon} {
        color: #FFF !important;
      }
    }
  }

  .tabs-left, .tabs-right {
    .tab-content {
      overflow: auto;
    }
  }

  .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus {
    background-color: #4F99C6;
    border-color: #4F99C6;
    color: #FFFFFF;

    > .@{icon} {
      color: #FFF !important;
    }
  }

  .enable_tab_options() when (@enable-tab-options = true) {

    /* bigger tab buttons */
    .nav-tabs > li:not(.active):not(.open) > a:not(:hover) > .@{icon}:first-child.disabled {
      color: #909090 !important;
    }

    /* bigger tab buttons */
    .nav-tabs.tab-size-bigger > li > a {
      padding-left: 14px;
      padding-right: 14px;

      > .@{icon}:first-child {
        display: block;
        margin-bottom: 6px;
        width: auto;
      }
    }

    //some tab customizations

    //spaced tabs (top & bottom)
    .nav-tabs.tab-space-1 > li > a {
      margin-right: 1px;
    }
    .nav-tabs.tab-space-2 > li > a {
      margin-right: 2px;
    }
    .nav-tabs.tab-space-3 > li > a {
      margin-right: 3px;
    }
    .nav-tabs.tab-space-4 > li > a {
      margin-right: 4px;
    }

    //colored tabs

    @tab-color-blue: #7DB4D8;

    .nav-tabs[class*="tab-color-"] > li > a {
      &, &:focus, &:hover {
        color: #FFF;
        border-color: transparent;
        margin-right: 3px;
      }

      > .badge {
        .border-radius(2px);
      }
    }

    .nav-tabs[class*="tab-color-"] > li:not(.active) > a {
      &:hover {
        opacity: 0.85;
        border-color: rgba(0, 0, 0, 0.15);
        border-bottom-color: transparent;
      }

      > .@{icon}:first-child {
        color: #FFF !important;
      }

      > .badge {
        color: rgba(0, 0, 0, 0.4) !important;
        background-color: #FFF !important;
        .border-radius(2px);
      }
    }

    .nav-tabs.tab-color-blue > li > a {
      &, &:focus {
        background-color: @tab-color-blue;
      }
    }

    .nav-tabs[class*="tab-color-"] > li.active > a {
      &, &:focus, &:hover {
        background-color: #FFF;
        color: darken(desaturate(@tab-color-blue, 20%), 20%);
        .box-shadow(none) !important;
      }
    }

    .nav-tabs.tab-color-blue > li.active > a {
      &, &:focus, &:hover {
        color: darken(desaturate(@tab-color-blue, 25%), 25%);
        border-color: @tab-color-blue @tab-color-blue transparent;
      }

      .tabs-below & {
        border-color: transparent @tab-color-blue @tab-color-blue;
      }
    }

    .nav-tabs.tab-color-blue {
      border-bottom-color: #C5D0DC;
    }

    /* background for tab links */
    .nav-tabs.background-blue {
      padding-top: 6px;
      background-color: #EFF3F8;
      border: 1px solid #C5D0DC;
    }

    .tabs-below .nav-tabs.background-blue {
      padding-top: 0;
      padding-bottom: 6px;
    }
    .tabs-below .nav-tabs.tab-color-blue {
      border-top: none;
      border-bottom-color: #C5D0DC;
    }

  }
  .enable_tab_options();

}

.enable_tabs();

//accordion
.enable_accordion() when (@enable-accordion = true) {
  .accordion-style1.panel-group {
    .panel {
      border-radius: 0;
      border-color: @accordion-border;
      background-color: #FFF;
      box-shadow: none;

      &:last-child {
        border-bottom-width: 1px;
      }

      .collapse {
        background-color: #FFF;
      }

      + .panel {
        margin-top: 2px;
      }
    }

    .panel-heading + .panel-collapse .panel-body {
      border-top-color: @accordion-border !important;
    }

    .panel-heading {
      padding: 0;

    }

    .panel-heading .accordion-toggle {
      color: @tab-hover-color;
      background-color: @accordion-active-bg;
      position: relative;
      font-weight: bold;

      font-size: @font-size-accordion-toggle;
      line-height: 1;

      padding: 10px;
      display: block;

      &.collapsed {
        color: @accordion-header-text;
        font-weight: normal;
        background-color: #F9F9F9;
      }

      &:hover {
        color: @accordion-header-text-hover;
        background-color: @accordion-header-hover-bg;
        text-decoration: none;
      }

      &:focus, &:active {
        outline: none;
        text-decoration: none;
      }

      > .@{icon}:first-child {
        width: 16px;
      }

      &:hover > .@{icon}:first-child {
        text-decoration: none;
      }
    }

    .panel-body, .collapse.in > .panel-body {
      border-top: 1px solid @accordion-border;
    }

    &.no-padding {
      padding: 0;
    }
  }

  //style2, used in faq, etc...
  .enable_accordion_style_2() when (@enable-accordion-style-2 = true) {
    .accordion-style2.panel-group {
      .panel {
        border-width: 0;

        &:last-child {
          border-bottom-width: 0;
        }

        + .panel {
          margin-top: 4px;
        }

        .panel-body {
          border-top: none;
        }
      }

      .panel-heading .accordion-toggle {
        background-color: #EDF3F7;

        border: 2px solid #6EAED1;
        border-width: 0 0 0 2px;

        &:hover {
          text-decoration: none;
        }

        &.collapsed {
          background-color: #F3F3F3;
          color: #606060;
          border-width: 0 0 0 1px;
          border-color: #D9D9D9;

          &:hover {
            background-color: #F6F6F6;
            color: #438EB9;
            text-decoration: none;
          }
        }
      }

      .panel-body, .collapse.in > .panel-body {
        border-top: none;
      }

    }

    //nested questions
    .accordion-style2.panel-group .accordion-style2.panel-group {
      .panel {
        border-bottom: 1px dotted #D9D9D9;

        &:last-child {
          border-bottom: none;
        }

        .panel-heading, .panel-heading .accordion-toggle {
          background-color: transparent;
          border-width: 0;
          font-size: @font-size-accordion-toggle;

          padding-top: 6px;
          padding-bottom: 8px;
        }

        .panel-heading {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }
  .enable_accordion_style_2();

}

.enable_accordion();
